<template>
  <div style="height:100%;width:100%">
    <div ref="basicMap" :style="mapSize"></div>
  </div>
</template>
<script>
    export default {
        props: {
            ak: {
                type: String,
                default: 'LwwaaGuuopgcv1bNpsi5jbuohrAB2BC1'
            },
            mapWidth: {
                type: String
            },
            mapHeight: {
                type: String
            },
            center: {
                type: Array
            },
            zoom: {
                type: Number
            },
            navigationOffset: {
                type: String
            }
        },
        data () {
            return {
            }
        },
        mounted () {
            this.reset()
        },
        methods: {
            // 初始化
            reset () {
                const {getMapScript, initMap} = this
                getMapScript().then(initMap)
            },
            // 获取baidumap
            getMapScript () {
                if (!global.BMap) {
                    const ak = this.ak || this._BMap().ak
                    global.BMap = {}
                    global.BMap._preloader = new Promise((resolve, reject) => {
                        global._initBaiduMap = function () {
                            resolve(global.BMap)
                            global.document.body.removeChild($script)
                            global.BMap._preloader = null
                            global._initBaiduMap = null
                        }
                        const $script = document.createElement('script')
                        global.document.body.appendChild($script)
                        $script.src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap`
                        $script.src = `https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js`
                        $script.src = `https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js`
                    })
                    return global.BMap._preloader
                } else if (!global.BMap._preloader) {
                    return Promise.resolve(global.BMap)
                } else {
                    return global.BMap._preloader
                }
            },
            // 获取BMap, 初始化地图
            initMap (BMap) {
                this.BMap = BMap
                this.init(BMap)
            },
            init (BMap) {
                let $el = this.$refs.basicMap
                const map = new BMap.Map($el)
                this.map = map
                this.setMapOptions()
                this.$emit('ready', {BMap, map})
            },
            // 设置地图配置
            setMapOptions () {
            }
        },
        computed: {
            mapSize () {
                let styleObj = {
                    width: this.mapWidth,
                    height: this.mapHeight
                }
                return styleObj
            },
            initZoom () {
                return this.zoom ? this.zoom : 18
            },
            initCenter () {
                return this.center ? this.center : '广州'
            }
        }
    }
</script>
<style>
  .anchorBL {
    display:none;
  }
</style>
